<script setup>
import { NCard, NInput, NSpace, darkTheme, NInputGroup, NButton, useMessage, NText, NSpin } from 'naive-ui'
import { useStore } from '@/stores/index'
import axios from 'axios'
import { ref } from 'vue'

const message = useMessage() // 实例化信息条
const store = useStore() // 实例化useStore
const backedHost = store.$state.backedHost // 后端API前缀

const showLoading = ref(false)  // 是否显示loading
const username = ref('') // 用户名
const password = ref('') // 密码

// 登录
function login() {
  if (username.value && password.value) {
    showLoading.value = true  // 显示loading
    const fetchData = JSON.stringify({
      username: username.value,
      password: password.value
    })
    const fetchConfig = {
      method: 'post',
      url: backedHost + '/user/login',
      headers: { 'Content-Type': 'application/json' },
      data: fetchData
    }
    axios(fetchConfig)
      .then((response) => {
        if (response.data.code === 2000) {
          message.success('登录成功!')
          setTimeout(() => {
            showLoading.value = false  // 关闭loading
            // 设置token
            localStorage.setItem('token', response.data.data)
            // 跳转到主页
            window.location.href = '/'
          }, 1000)
        }
      })
      .catch((error) => {
        showLoading.value = false  // 关闭loading
        message.warning(error.response.data.message)
      })
  } else {
    message.warning('请完善信息！')
  }
}

// 重置
function reset() {
  username.value = ''
  password.value = ''
}
</script>

<template>
  <div style="padding: 10px">
    <n-spin :show="showLoading" :theme="darkTheme">
      <n-card
        id="login-card"
        content-class="login-card-content"
        hoverable
        :embedded="true"
      >
        <n-text type="success" strong italic underline style="font-size: x-large;">Log</n-text>
        <n-text type="info" strong underline italic style="font-size: x-large;">in</n-text>
        <n-text style="font-size: 23px;"> 💖 </n-text>
        <n-text type="info" strong italic underline  style="font-size: x-large;">Spa</n-text>
        <n-text type="warning" strong italic underline  style="font-size: x-large;">ce</n-text>
        <n-space vertical class="login-input">
          <n-input-group>
            <n-button color="#3D3B40">账号</n-button>
            <n-input
              v-model:value="username"
              type="text"
              placeholder="请输入账号"              
            />
          </n-input-group>
          <n-input-group>
            <n-button color="#3D3B40">密码</n-button>
            <n-input
              v-model:value="password"
              type="password"
              placeholder="请输入密码"              
            />
          </n-input-group>          
          <!-- 登录和重置按钮 -->
          <n-button
            type="primary"
            style="width: 100%; margin-top: 10px"
            @click="login()"
            >提交</n-button
          >
          <n-button
            ghost
            color="#3D3B40"
            style="width: 100%; margin-top: 10px"
            @click="reset()"
            >重置</n-button
          >
        </n-space>
      </n-card>
    </n-spin>    
  </div>
</template>

<style>
.login-card-content {
  background-color: #F6F5F5;
  color: black;
}
#login-card {
  box-shadow: 0px 0px 4px 4px rgba(0, 0, 0, 0.2);
}
.login-input {
  margin-top: 15px;
  text-align: left;
}
#verify-img {
  height: 34px;
  width: 80px;
  border: 1px;
  border-radius: 2px;
}
#verify-svg {
  background-color: whitesmoke;
  height: 34px;
  width: 80px;
  border: 1px;
  border-radius: 2px;
}
</style>
